<template>
  <el-card shadow="never" :body-style="{ padding: '0 20px 20px' }">
    <div slot="header" class="cardHeader flexbox justifyBetween">
      <span>充电时段统计</span>
      <el-radio-group v-model="radio" size="mini">
        <el-radio-button label="今日"></el-radio-button>
        <el-radio-button label="昨日"></el-radio-button>
        <el-radio-button label="本月"></el-radio-button>
      </el-radio-group>
    </div>
    <div ref="chartContainer" id="chartContainer" class="chartContainer"></div>
  </el-card>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
export default {
  name: "PeriodChart",
  mixins: [resize],
  props: {},
  data() {
    return {
      radio: "今日",
      chart: null,
      dataSource: [
        { value: 1048, name: "谷期" },
        { value: 735, name: "平期" },
        { value: 580, name: "峰期" },
        { value: 484, name: "尖期" },
      ],
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          // formatter: function (params) {
          //   console.log(params);
          //   return params.name + ":" + params.value;
          // },
          // formatter: ``
        },
        legend: {
          // bottom: "0",
          top: 190,
          left: "center",
          orient: "vertical",
          // itemGap: 20,
          // formatter: function (name) {
          //   console.log(name);
          //   return `{a|${name}}`;
          // },
          formatter: (name) => {
            let total = 0;
            let target;
            for (let i = 0; i < this.dataSource.length; i++) {
              total += this.dataSource[i].value;
              if (this.dataSource[i].name === name) {
                target = this.dataSource[i].value;
              }
            }
            var arr = [
              "{a|" + name + "}",
              "{b|" + target + "kwh}",
              "{c|" + ((target / total) * 100).toFixed(2) + "%}",
            ];
            return arr.join("  ");
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                width: 80,
              },
              b: {
                width: 80,
                fontSize: 14,
              },
              c: {
                fontSize: 14,
                color: "#c1c1c1",
              },
            },
          },
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            center: ["50%", 90],
            radius: ["40", "80"],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: "center",
              formatter: function (params) {
                return params.percent + "%";
                // if (params.dataIndex === 0) {
                //   console.log(params.percent);
                //   return (
                //     "{Proportiondefault|" +
                //     params.percent.toFixed(2) +
                //     "%}" +
                //     "\n{name|" +
                //     params.name +
                //     "}"
                //   );
                // } else {
                //   return "";
                // }
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                // fontWeight: "bold",
                // formatter: (params) => {
                //   //切换非默认选项配置数据展示
                //   if (params.dataIndex != 0) {
                //     return (
                //       "{Proportiondefault|" +
                //       params.percent.toFixed(2) +
                //       "%}" +
                //       "\n{name|" +
                //       params.name +
                //       "}"
                //     );
                //   } else {
                //     return;
                //   }
                // },
              },
            },
            labelLine: {
              show: false,
            },
            data: this.dataSource,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.chartContainer {
  width: 100%;
  height: 346px;
}
.cardHeader {
  height: 28px;
}
</style>
